.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
body{
    background: #f7f5f5;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .px2rem(height, 136);
    .px2rem(line-height, 136);
    background: black;
    color: white;
    .px2rem(font-size, 36);
    z-index: 110;
    h3{
        position: absolute;
        text-align: center;
        width: 100%;
    }
    .left{
        position: absolute;
        left: 3%;
        z-index: 200;
    }
    .right{
        color: white;
        position: absolute;
        right: 3%;
    }
}
.exchange{
    .px2rem(margin-top, 136);
    display: flex;
    background: white;
    li{
        flex: 1;
        .px2rem(height, 112);
        a{  
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                .px2rem(height, 60); 
                margin-right: 3%;
            }
        }
    }
    li:first-child{
        border-right: 1px solid #B8B8B8;
    }
}

.nav{
    background-color: #f2f2f2;
    .px2rem(height, 94); 
    .px2rem(font-size, 30);
    ul{
       display: flex;
       justify-content: center;
       height: 100%;
        li{
            float: left;
            width: 16%;
            .px2rem(line-height, 110);
            text-align: center;
            margin: 0 3%;
        }
        .on{
            border-bottom: 6px solid blue;
        }
    }
}

.one{
    p{
        .px2rem(line-height, 90);
        color: #637dfd;
        .px2rem(font-size, 36)
    }
    .box{
        .px2rem(height, 158);
        .px2rem(padding-top, 16);
        .px2rem(padding-bottom, 16);
        border:1px solid red;
        width: 90%;
        margin: 0 5%;
        .px2rem(margin-top, 24);
        border-radius: 4%;
        display: flex;
            .left{
                flex:3;
                border-right: 1px solid #ccc;
                height: 100%;
                color: red;
                .px2rem(line-height, 158);
                text-align: center;
                .px2rem(font-size, 34);
            }
            .right{
                flex:7;
                h2{
                   .px2rem(font-size, 30);
                    margin-left: 5%;
                    .px2rem(line-height, 58);
                }
                ul{
                    li{
                        .px2rem(font-size, 20);
                        .px2rem(line-height, 36);
                        margin-left: 5%;
                    }
                }
            }
       
    }
}

.two,.three{
    p{
        .px2rem(line-height, 90);
        .px2rem(font-size, 36)
    }
    .box{
        .px2rem(height, 158);
        .px2rem(padding-top, 16);
        .px2rem(padding-bottom, 16);
        border:1px solid black;
        width: 90%;
        margin: 0 5%;
        .px2rem(margin-top, 24);
        border-radius: 4%;
        display: flex;
        .left{
            flex:3;
            border-right: 1px solid #ccc;
            height: 100%;
            .px2rem(line-height, 158);
            text-align: center;
            .px2rem(font-size, 34);
        }
        .right{
            flex:7;
            color: #666;
            position: relative;
            h2{
               .px2rem(font-size, 30);
                margin-left: 5%;
                .px2rem(line-height, 58);
            }
            ul{
                li{
                    .px2rem(font-size, 20);
                    .px2rem(line-height, 36);
                    margin-left: 5%;
                }
            }
            p{
                .px2rem(font-size, 86);
                text-align: center;
                position: absolute;
                top: 50%;
                 .px2rem(margin-top, -43);
            }
           
        }
        
    }
}